<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <tool-bar @search="search" @reset="() => {
                (this.queryParam = {}), $refs.table.refresh(true);
            }
                ">
                <template slot="toolBtn" slot-scope="scope">
                </template>
                <template slot="toolForm">
                    <a-form-item :label="$ct('workflowTitle', '流程标题')">
                        <a-input v-model="queryParam.formName" :placeholder="$ct('workflowTitle', '流程标题')" />
                    </a-form-item>
                </template>
            </tool-bar>
            <a-tabs default-active-key="1" :activeKey="activeKey" @change="tabsChange">
                <a-tab-pane key="1" tab="我抄送的" style="height: calc(100vh - 262px);">
                    <DataGrid ref="mycc" :columns="columns" :url="url" rowKey="uuid" showPagination="auto"
                        :queryParam="queryParam" :showRowSelect="false">
                        <span slot="renderUserNameId" slot-scope="{ text, record, index }">
                            {{ record.userName }}/{{ record.userNameId }}
                        </span>
                        <span slot="renderFlowStatus" slot-scope="{ text, record, index }">
                            <a-tag :color="text === 'review_status.02' ? 'green' : 'red'">
                                {{ text === "review_status.02" ? "已阅" : "未读" }}
                            </a-tag>
                        </span>
                        <span slot="renderAction" slot-scope="{ text, record }">
                            <template>
                                <a @click="handleGetListComments(record)">{{ $ct('approvalComments', '审批意见') }}</a>
                                <span class="action-margin"></span>
                                <a @click="handleSub(record)" class="action-delete">{{ $ct('delete', '删除') }}</a>
                                <span class="action-margin"></span>
                                <a @click="handleFlow(record)">{{ $ct('workflowChart', '流程图') }}</a>
                            </template>
                        </span>
                    </DataGrid>
                </a-tab-pane>
                <a-tab-pane key="2" tab="抄送我的" style="height: calc(100vh - 262px);">
                    <DataGrid ref="ccme" :columns="columns" :url="url" rowKey="uuid" showPagination="auto"
                        :queryParam="queryParam" :showRowSelect="false">
                        <span slot="renderUserNameId" slot-scope="{ text, record, index }">
                            {{ record.userName }}/{{ record.userNameId }}
                        </span>
                        <span slot="renderFlowStatus" slot-scope="{ text, record, index }">
                            <a-tag :color="text === 'review_status.02' ? 'green' : 'red'">
                                {{ text === "review_status.02" ? "已阅" : "未读" }}
                            </a-tag>
                        </span>
                        <span slot="renderAction" slot-scope="{ text, record }">
                            <template>
                                <a @click="handleGetListComments(record)">{{ $ct('approvalComments', '审批意见') }}</a>
                                <span class="action-margin"></span>
                                <a @click="handleSub(record)" class="action-delete">{{ $ct('delete', '删除') }}</a>
                                <span class="action-margin"></span>
                                <a @click="handleFlow(record)">{{ $ct('workflowChart', '流程图') }}</a>
                            </template>
                        </span>
                    </DataGrid>
                </a-tab-pane>
            </a-tabs>

            <task-view ref="taskModal" :visible="taskVisible" :loading="confirmLoading" @cancel="taskHandleCancel()"
                @ok="taskHandleOk" />

            <flowChat ref="flowChatForm"></flowChat>
            <comment-modal ref="commentModal"></comment-modal>

        </div>
    </div>
</template>
  
<script>

import { dataGridMixin } from "@/mixins/dataGridMixin";
import { DataGrid } from "@/components";
import taskView from "../apiFlowableTask/myMission/taskView.vue";


import commentModal from "../oaLeave/comment";
import flowChat from "../apiFlowableTask/myMission/flowChat.vue";

export default {
    name: "TableList",
    mixins: [dataGridMixin],
    components: { DataGrid, taskView, flowChat, commentModal },
    data() {
        return {
            columns: [
                { title: "流程标题", dataIndex: "formName", langCode: "workflowTitle" },
                { title: "抄送日期", dataIndex: "createTime", langCode: "CcDate" },
                { title: "当前环节", dataIndex: "taskName", langCode: "CurrentPhase" },
                {
                    title: "抄送人", dataIndex: "userNameId", langCode: "ccPeople",
                    scopedSlots: {
                        customRender: 'renderUserNameId'
                    }
                },
                {
                    title: "状态", dataIndex: "reviewStatus", langCode: "state",
                    scopedSlots: {
                        customRender: "renderFlowStatus"
                    },
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    width: 200,
                    scopedSlots: { customRender: "renderAction" },
                },
            ],
            visible: false,
            confirmLoading: false,
            mdl: null,
            // 查询参数
            queryParam: {},
            url: {
                getPageSet: "/workflow/actMyProcessCopy/getMyPageSet",
                deleteBatch: "/workflow/actMyProcessCopy/deleteBatch",
            },
            isView: false,
            taskVisible: false,
            activeKey: "1"

        }
    },
    methods: {
        // 详情
        handleTransaction(e) {
            this.confirmLoading = true;
            const jsonData = "";
            this.$post("/workflow/apiFlowableProcessInstance/clickStartProcess", {
                modelKey: e.modelKey,
                taskId: e.taskId,
                processInstanceId: e.processInstanceId,
                nodeId: e.nodeId,
                processDefinitionId: e.processDefinitionId,
            }).then((res) => {
                if (res.statusCode != 300) {
                    const jsonData = res;
                    this.$refs.taskModal.loadData(e, jsonData);
                    this.confirmLoading = false;
                    this.taskVisible = true;
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        taskHandleOk() {
            this.taskVisible = false;
        },
        taskHandleCancel() {
            this.taskVisible = false;
        },
        // 流程图
        handleFlow(record) {
            this.$post("/workflow/oaLeave/clickFlowChart", {
                uuid: record.businessKey,
            }).then((res) => {
                if (res.statusCode != 300) {
                    const jsonData = res;
                    this.$refs.flowChatForm.loadData(
                        jsonData,
                        jsonData.lists.actDeModelId,
                        jsonData.lists.actDeModelKey,
                        jsonData.lists.actDeModelName,
                        jsonData.lists.flowDesign,
                        record
                    );
                } else {
                    this.$message.error(res.message);
                }
            });
        },

        handleGetListComments(record) {
            if(this.activeKey === "1"){
                this.$refs.commentModal.getCommentList(record.businessKey);
            }else{
                if('review_status.02'== record.reviewStatus){
                    this.$refs.commentModal.getCommentList(record.businessKey);
                    return
                }
                this.$post("/workflow/actMyProcessCopy/updateReviewStatusByUuid", {
                    uuid: record.uuid,
                }).then((res) => {
                    if (res.statusCode != 300) {
                    this.$refs.commentModal.getCommentList(record.businessKey);
                    this.$refs.table.refresh(true)
                    } else {
                    this.$message.error(res.message);
                    }
                });
            }
        },

        tabsChange(key) {
            this.activeKey = key;
            this.queryParam = {};
            this.$nextTick(() => {
                if(key === "1"){
                    this.url.getPageSet = "/workflow/actMyProcessCopy/getMyPageSet";
                    this.$refs.mycc.refresh();
                }else{
                    this.url.getPageSet = "/workflow/actMyProcessCopy/getPageSet";
                    this.$refs.ccme.refresh();
                }
            })
        },

        search(){
            if(this.activeKey === "1"){
                this.$refs.mycc.refresh();
            }else{
                this.$refs.ccme.refresh();
            }
        },

        handleSub(record, paramar) {
            const that = this
            let uuids = ''
            if (!record || record.length === 0) {
                this.$message.warn(this.$ct("pleaseCheckTheDataToBeDeleted","请勾选需要删除的数据"), 1.5)
                return
            } else if (record && record[0]) {
                uuids = record.toString()
            } else {
                uuids = record.uuid
            }
            let value = {
                uuid: uuids,
                ...paramar
            }
            that.$confirm({
                title: that.$ct("tips","提示"),
                content: that.$ct("deleteConfirmationPrompt","确定删除该数据吗？删除之后不可恢复！"),
                okText: that.$ct("confirm","确定"),
                cancelText: that.$ct("cancel","取消"),
                closable: true,
                icon: () => that.$createElement('a-icon', {
                    props: {
                        key: 'warning',
                        type: 'exclamation-circle',
                        twoToneColor: '#faad14'
                    }
                }),
                onOk() {
                    return new Promise((resolve, reject) => {
                        // 在这里调用删除接口
                        that.$post(that.url.deleteBatch, value).then((res) => {
                                if (res.statusCode === 200 || res === 1) {
                                    that.$message.success(res.message, 1.5)
                                    if (that.fetch) {
                                        that.fetch(that.queryParam)
                                    } else {
                                        if(that.activeKey === "1"){
                                            that.$refs.mycc.refresh();
                                        }else{
                                            that.$refs.ccme.refresh();
                                        }
                                    }
                                    resolve();
                                } else {
                                    that.$message.error(res.message, 1.5)
                                    reject();
                                }
                        });
                    });
                },
                onCancel() {}
            })
        }
            
    },
}
</script>
  
<style lang="less" scoped>
/deep/ .division-bar {
    margin: 5px -10px 0px -10px !important;
}

/deep/ .ant-table {
    /*margin-bottom: 45px;*/
}</style>
  